<template>
  <view class="city-select-head dark">
    <view class="city-select-head-left" @click="gotoBack">
      <i class="iconfont icon-arrow-left icon-box"></i>
      <!-- <ArrowLeft class="city-icon" /> -->
    </view>
    <view class="city-select-head-title">切换城市</view>
    <view class="city-select-head-current" v-if="currentCity">
      当前: {{ currentCity }}
    </view>
  </view>
</template>
<script>
  import ArrowLeft from "@/components/common/icon/ArrowLeftIcon.vue";

  export default {
    name: "CitySelectHead",
    components: {
      ArrowLeft,
    },
    props: {
      currentCity: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        currentColor: "white",
      };
    },
    methods: {
      gotoBack() {
        this.$emit("back"); // 触发父组件的 back 事件
      },
    },
  };
</script>
<style>
  .icon-box {
    font-family: 24px;
    color: #fff;
    margin-left: 8px;
  }
  .city-select-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
  }
  .city-icon {
    left: 20px;
    color: #f0f0f0;
  }
  .city-select-head-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
  }
  .city-select-head-current {
    color: #f0f0f0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    margin-left: auto;
    padding-right: 15px;
  }
</style>
